<template>
  <van-nav-bar :title="title"></van-nav-bar>

  <div id="content">
    <router-view />
  </div>

  <van-tabbar route @change="onChange" active-color="#F9927B" v-model="active">
    <van-tabbar-item to="/" icon="todo-list-o" name="TODO">TODO</van-tabbar-item>
    <van-tabbar-item to="/count" icon="bar-chart-o" name="统计">统计</van-tabbar-item>
    <van-tabbar-item to="/my" icon="user-circle-o" name="我的">我的</van-tabbar-item>
  </van-tabbar>
</template>

<script setup>
  import {Toast} from "vant";
  import {ref} from "vue";

  const active = ref('TODO');
  let title = ref('TODO');


  const onChange = (index) => {
    title.value = index
    Toast(`页面 ${index}`);
  };
</script>

<style>
.van-ellipsis {
  font-family: Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', '微软雅黑', Arial, sans-serif;
  font-weight: bolder;
}
</style>
